<template>
  <div class="contentbox designReviewContainer">

    <div v-if="designGroups&&designGroups.length != 0" class="fujianList">
      <fujian onlySee='1' @fuzhiFunc="setItemData" :fujianList="designGroups" :subFujianList="designList"></fujian>
    </div>
    <div v-if="showBox" class="fujianAnswer">
      <design-opinions
        v-if="showBox"
         :file="currentFile" :linkName="linkName" :subName="subName" :subNameIndex="subNameIndex" :projectId="projectId"
      ></design-opinions>
    </div>
    <div v-if="designGroups.length == 0 || !designGroups" class="no-data">
      暂无数据
    </div>
    <!-- <el-aside class="designMenu" style="width: 200px;">
      <el-menu class="designTag" default-active="0-0">
          <el-submenu :index="`${index}`" v-for="(item, index) in designGroups" :key="item">
            <template slot="title">
              <span>{{item}}</span>
            </template>
            <el-menu-item v-for="(it, idx) in designList" @click="handleChangeComponent(it.fileId)" :index="`${index}-${idx}`" :key="it.fileId" v-if="it.tag === item">
              {{it.fileName | handleSuffix}}
            </el-menu-item>
          </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <design-opinions :file="currentFile" :linkName="linkName" :firstLinkName="firstLinkName" :projectId="projectId" ></design-opinions>
    </el-main> -->
  </div>
</template>

<script>
    import designOpinions from "./designOpinions/";
    import fujian from "@/components/fujianListForThreeNotOne";
    export default {
        components: {
            designOpinions,
            fujian
        },
        data() {
            return {
                currentFileId: 0,
                annexTabs: `designOpinions0`,
                subName:"",
                subNameIndex:1,
                showBox:false,
                currentFile:null,
            };
        },
        props: {
            designList: {
                type: Array,
                require: true,
                default: () => []
            },
            projectId: {
                type: Number,
                require: true
            },
            linkName: {
                type: String,
                require: true
            },
            firstLinkName: {
                type: String,
                require: true
            }
        },
        filters: {
            handleSuffix (fileName) {
                if (!fileName) return ''
                return fileName.indexOf('.') !== -1 ? fileName.split('.')[0] : fileName
            }
        },
        mounted() {
        },
        computed: {
            // 去重文件的tag属性，获得文件group选项
            designGroups() {
                let results = []
                if(this.designList) {
                    let obj = {}
                    for(let j of this.designList) {
                        if(j['tag'] && !obj[j['tag']]) {
                            results.push(j['tag'])
                            obj[j['tag']] = 1
                        }
                    }
                }
                return results
            },
        },
        methods: {
            setItemData (file,fid,subName,subNameIndex) {
              this.currentFile = file;
              this.currentFileId = fid;
              this.subName = subName;
              this.subNameIndex = subNameIndex;
              this.showBox = true
            }
        }
    };
</script>

<style lang="scss" scoped>
.contentbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  // -webkit-align-items: center;
  // align-items: center;
  .fujianList{
    width: 25%;
  }
  .fujianAnswer{
    width: 75%;
  }
  
}
</style>

